import CourseWareList from '@/components/resourceLibraryComp/CourseWareList';
import VerticalTabs from '@/components/resourceLibraryComp/VerticalTabs';
import type { ICourseWareTab } from '@/components/resourceLibraryComp/VerticalTabs/interface';
import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import OStyle from '../common/style.less';

const courseWareTabList: ICourseWareTab[] = [
  {
    key: 'videoCourseWare',
    label: '视频课件',
    element: <CourseWareList key="videoCourseWare" courseWareFlag="videoCourseWare" />,
  },
  {
    key: 'graphicCourseWare',
    label: '图文课件',
    element: <CourseWareList key="graphicCourseWare" courseWareFlag="graphicCourseWare" />,
  },
  {
    key: 'pdfCourseWare',
    label: 'pdf课件',
    element: <CourseWareList key="pdfCourseWare" courseWareFlag="pdfCourseWare" />,
  },
];

const CourseWare: React.FC<any> = () => {
  const location = useLocation();
  const [tabActiveKey, setTabActiveKey] = useState('videoCourseWare');
  const [currTabItem, setCurrTabItem] = useState<ICourseWareTab>(courseWareTabList[0]);

  const handleTabItemChange = (activeKey: string, tabItem: ICourseWareTab) => {
    setTabActiveKey(activeKey);
    setCurrTabItem({ ...tabItem });
  };

  useEffect(() => {
    const activeTab = location.state?.activeTab;
    if (activeTab) {
      setTabActiveKey(activeTab);
      setCurrTabItem(courseWareTabList.find((item) => item.key === activeTab)!);
    }
  }, [location]);

  return (
    <div className={OStyle.course_ware_page}>
      <div className={OStyle.course_ware_page_left}>
        <VerticalTabs
          courseWareTabList={courseWareTabList}
          tabActiveKey={tabActiveKey}
          onTabItemChange={handleTabItemChange}
        />
      </div>
      <div className={OStyle.course_ware_page_right}>{currTabItem && currTabItem.element}</div>
    </div>
  );
};

export default CourseWare;
